<template>
  <div
    class="fire-dialog-content"
    :style="{ right: isPutLaunch ? '15px' : '-500px' }"
  >
    <div class="dialog-top-title">火点历史监测信息</div>
    <div class="date-search">
      <div class="date-box">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          popper-class="date-picker-style"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          @change="dateTimeChnage"
        />
      </div>
      <div class="search-box">
        <el-input
          v-model="input"
          style="width: 160px"
          placeholder="请输入关键词"
        />
        <img src="../images/search.png" alt="" />
      </div>
    </div>
    <div class="table-box">
      <div class="table-header">
        <div style="width: 141px">火点时间</div>
        <div style="width: 87px">过火面积</div>
        <div style="width: 238px">火点地点</div>
      </div>
      <div class="table-content scrollbar">
        <div class="content-col" v-for="(item, index) in rowData" :key="index">
          <div class="col" style="width: 141px">{{ item.observeTime }}</div>
          <div class="col" style="width: 87px">{{ item.fireArea }}</div>
          <div class="col" style="width: 238px">
            {{ item.address }}
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        :page-size="pageSize"
        layout="prev, pager, next"
        background
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <div class="fileDownload" v-if="isShow">
      <div>
        <img src="../images/file.png" alt="" />
        火点历史实况信息
      </div>
      <div @click="download">立即下载</div>
    </div>
  </div>
  <div
    class="put-launch"
    @click="putLaunch"
    :style="{
      right: isPutLaunch ? '502px' : '0px'
    }"
  >
    <img
      src="../images/put-launch.png"
      :style="{ transform: `rotate(${isPutLaunch ? '-180deg' : '0'})` }"
      alt=""
    />
  </div>
</template>

<script setup lang="ts">
import apiList from '@/pages/forestry/api/api'
import { fireInsuranceStore } from '@/pages/forestry/store/store'
const fireStore = fireInsuranceStore()
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const baseLeafletMapStore = useBaseLeafletMapStore()
const permissions = localStorage.getItem('userInfo')
const isShow = computed(() => {
  return (
    permissions.includes('forestFire:dowmload') || permissions.includes('*:*:*')
  )
})
const isPutLaunch = ref(true)
const value2 = ref([])
const input = ref()
const total = ref()
const currentPage = ref(1)
const pageSize = ref(10)
const rowData = ref([])
const startTime = ref()
const endTime = ref()
const putLaunch = () => {
  isPutLaunch.value = !isPutLaunch.value
}
// 格式化日期时间为 YYYY-MM-DD HH:MM:SS
const formatDateTime = date => {
  var year = date.getFullYear()
  var month = padZero(date.getMonth() + 1)
  var day = padZero(date.getDate())
  var hours = padZero(date.getHours())
  var minutes = padZero(date.getMinutes())
  var seconds = padZero(date.getSeconds())
  return (
    year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
  )
}

// 补零函数，确保输出两位数
const padZero = num => {
  return (num < 10 ? '0' : '') + num
}
const getDate = () => {
  // 获取当前日期时间
  var currentDate = new Date()
  // 计算一周前的日期时间
  var oneWeekAgoDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000) // 7天前的毫秒数
  // 格式化当前日期时间和一周前的日期时间
  var currentDateTimeString = formatDateTime(currentDate)
  var oneWeekAgoDateTimeString = formatDateTime(oneWeekAgoDate)
  startTime.value = oneWeekAgoDateTimeString
  endTime.value = currentDateTimeString
  value2.value = [startTime.value, endTime.value]
}
const getData = async () => {
  const { data } = await apiList.getForestryStationHistoryRealList({
    beginTime: startTime.value,
    endTime: endTime.value,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  total.value = data.total
  rowData.value = data.data
}
const handleCurrentChange = page => {
  currentPage.value = page
  getData()
}
const dateTimeChnage = time => {
  currentPage.value = 1
  startTime.value = formatDateTime(time[0])
  endTime.value = formatDateTime(time[1])
  getData()
}
const download = async () => {
  if (!startTime.value && !endTime.value) {
    ElMessage.error('请选择开始时间和结束时间')
    return
  }
  let res = await apiList.exportHistoryRealExcel({
    beginTime: startTime.value,
    endTime: endTime.value
  })
  // 创建Blob对象
  const blob = new Blob([res], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })
  // 创建临时链接
  const url = window.URL.createObjectURL(blob)

  // 创建a标签并设置相关属性
  const a = document.createElement('a')
  a.href = url
  a.download = '火点历史实况信息.xlsx' // 设置下载文件的文件名

  // 触发点击事件，下载文件
  a.click()

  // 清理临时链接
  window.URL.revokeObjectURL(url)
}
onMounted(() => {
  getDate()
  getData()
})
</script>

<style scoped lang="scss">
.fire-dialog-content {
  width: 487px;
  height: 60%;
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 10px 1px #00ccff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #00a8ff;
  position: fixed;
  top: 54%;
  transform: translateY(-50%);
  z-index: 10000;
  transition: right 0.5s ease;
  padding: 19px 7px;
  box-sizing: border-box;
  .dialog-top-title {
    width: 367px;
    height: 41px;
    background: url(../images/top-title.png) no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 43px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: 0 0 16px 52px;
  }
  .date-search {
    width: 458px;
    height: 38px;
    margin-left: 6px;
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    .date-box {
      width: 254px;
      height: 38px;
      background: rgba(2, 19, 43, 0.69);
      box-shadow: inset 0px 0px 6px 1px #00b9ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(34, 249, 255, 0.23);
    }
    .search-box {
      width: 192px;
      height: 38px;
      background: rgba(2, 19, 43, 0.69);
      box-shadow: inset 0px 0px 6px 1px #00b9ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(34, 249, 255, 0.23);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
      }
    }
  }
}
.put-launch {
  width: 30px;
  height: 50px;
  background: rgba(0, 17, 46, 0.6);
  box-shadow: 0px 0px 0px 1px rgba(0, 204, 255, 0.05),
    inset 0px 0px 14px 1px #00ccff;
  border-radius: 10px 0px 0px 10px;
  border: 1px solid #00a8ff;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: right 0.5s ease;
  img {
    width: 21px;
    height: 15px;
  }
}
.table-box {
  width: 100%;
  height: calc(100% - 215px);
  margin-bottom: 18px;
  .table-header {
    display: flex;
    justify-content: flex-start;
    div {
      height: 36px;
      margin-right: 2px;
      font-weight: 400;
      font-size: 14px;
      color: #96adc5;
      line-height: 36px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      background: url(../images/headerImg.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .table-content {
    width: 100%;
    height: calc(100% - 36px);
    overflow-y: auto;
    .content-col {
      width: 100%;
      height: 36px;
      display: flex;
      justify-content: flex-start;
      .col {
        height: 36px;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
        font-style: normal;
        white-space: nowrap; /* 防止换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }
    }
    .content-col:nth-child(2n) {
      background: url(../images/back.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
.pagination {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.fileDownload {
  width: 100%;
  height: 54px;
  background: url(../images/file-bag.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  div:first-child {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 0px;
    text-align: center;
    font-style: normal;
    img {
      width: 39px;
      height: 39px;
      margin-right: 17px;
      margin-left: 26px;
    }
  }
  div:last-child {
    width: 108px;
    height: 36px;
    background: url(../images/echartsActive.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 18px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
    font-style: normal;
    cursor: pointer;
  }
}
</style>
<style>
.date-box .el-date-editor.el-input,
.date-box .el-date-editor.el-input__wrapper {
  width: 92%;
  height: 100%;
}
.date-box .el-range-separator {
  color: #dde7ee;
}
.date-box .el-range-input {
  color: #fff;
}
.el-input__inner {
  color: #ffffff;
}
.date-picker-style .el-input__wrapper {
  border: 1px solid #101010;
}
.date-picker-style .el-input__inner {
  color: #000;
}
</style>
